<template>
  <a-card class="w-[300px]" :body-style="{ padding: '1rem' }">
    <a-form
      :model="currentTheme"
      layout="vertical"
      class="flex flex-col gap-4"
      @finish="submit"
      ref="formRef"
    >
      <a-tabs v-model:active-key="themeTab">
        <a-tab-pane key="canvas" tab="画布">
          <CanvasConfig />
        </a-tab-pane>
        <a-tab-pane key="layer" tab="图层">
          <Layer />
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import Layer from './Layer.vue';
import CanvasConfig from './CanvasConfig.vue';
import { currentTheme, themeTab } from '../data/data';
import { createTheme, updateTheme } from '@/api/modules/lcd/theme';
import { notify } from '@/utils/common/common';
import type { IResponse } from '@/api/config/types';

const formRef = ref();
const emit = defineEmits(['update']);
const submit = async () => {
  let result: IResponse | undefined;
  const validate = await formRef.value?.validate();
  if (!validate) return;
  if (!currentTheme.value.themeId) {
    const { data } = await createTheme(currentTheme.value);
    result = data;
  } else {
    const { data } = await updateTheme(currentTheme.value);
    result = data;
  }
  notify(result);
  emit('update', result);
};
defineExpose({
  submit,
});
</script>

<style lang="scss" scoped></style>
